<!DOCTYPE html>
<html lang="zh-CN" style="font-size: 20px">
<head>
    <meta charset="UTF-8">
    <title>css长度</title>
    <style>
        #d1 {
            /*第一种长度单位*/
            width: 200px;
            height: 200px;
            font-size: 20px;
            background-color: skyblue;
        }

        #d2 {
            /*第二种长度单位em,(相对于当前元素font-size的倍数)*/
            /* 1em=1xfont-size,2em=2xfont-size，没有font-size就用父元素的font-size(最终找到body),都没有使用浏览器默认font-size */
            /*d2最终宽高还是200x200*/
            width: 10em;
            height: 10em;
            /*font-size写成em那么就是找父的*/
            font-size: 1em;
            background-color: orange;
        }
        #d3 {
            /*第三种长度单位rem,(r就是root(html),相对于根元素的foot-size)*/
            width: 10rem;
            height: 10rem;
            /*font-size写成em那么就是找父的*/
            font-size: 20px;
            background-color: green;
        }

        #d4{
            width: 200px;
            height: 200px;
            font-size: 20px;
            background-color: gray;
        }
        .inside{
            /*第四种长度单位,百分号，相对于父元素的宽高*/
            width: 50%;
            height: 50%;
            font-size:150%;
            background-color: orange;
        }
        #test{
            width: 250px;
            height: 250px;
            font-size: 15px;
            /*等于缩进两个字*/
            text-indent: 2em;
            background-color: gray;

        }
    </style>
</head>
<body style="font-size: 50px">
<div>
    <img width="500px" src="../../images/长度单位.png">
</div>
<div id="d1">
    1
</div>
<hr>
<div id="d2">
    2
</div>
<hr>
<div id="d3">
    3
</div>
<hr>
<div id="d4">
    <div class="inside">4</div>
</div>
<hr>
<div id="test">
             好好学习，天天向上
</div>
</body>
</html>